import React from 'react'
import { NavLink, Link,useNavigate } from 
'react-router-dom'
import { Toast } from "antd-mobile";
import { getgoods } from '../request/api'
import { getcate } from '../request/api'
import { cartadd,} from "../request/api";
import '../assets/css/cate.css'
// import ''
export default class List extends React.Component {
    constructor() {
        super()
        this.state = {
            list: [],
            list1: [],
        }
    }
    // 挂载
    componentDidMount() {
        getgoods({
            fid: 1
        }).then(res => {
            console.log(res);
            if (res.code == 200) {
                this.setState({
                    list: res.list
                })

            }

        })

        getcate().then(res => {
            console.log(res);
            if (res.code == 200) {
                this.setState({
                    list1: res.list
                })
            }
        })


    }
    goTwo(id) {
        console.log(id);
        getgoods({
            fid: id
        }).then(res => {
            console.log(res);
            if (res.code == 200) {
                this.setState({
                    list: res.list
                })
            }
        })
    }
    gocart() {
        //   判断是否登录，是否有会话存储，有就请求添加到购物车，没有就未登录请登录
        if (sessionStorage.getItem("isLogin")) {
            console.log(JSON.parse(sessionStorage.getItem('isLogin')));
            // 请求添加购物车接口，等于200提示接口的msg
            console.log(JSON.parse(sessionStorage.getItem("isLogin")).uid);
           
            // console.log(state.type);
            // console.log(state.id);
            // cartadd({
            //     uid: JSON.parse(sessionStorage.getItem("isLogin")).uid,
            //     type: state.type,
            //     goodsid: state.id,
            //     num: 1
            // }).then((res) => {
            //     //    console.log(res);
            //     if (res.code === 200) {
            //         Toast.show({
            //             content: res.msg,
            //         });
            //         console.log(res);
            //         navigate("/index/cart");
            //     }
            // });
        } else {
            Toast.show({
                content: "未登录！请先登录",
            });
        }
    }
    render() {
        const { list, list1 } = this.state

        return (
            <div><div id="page">
                {/* <!-- 头部 --> */}
                <header>
                    {/* <!-- 顶部信息 --> */}
                    <div className="top_box">
                        {/* <!-- 左箭头图标 --> */}
                        <span className="iconfont icon-zuojiantou"></span>
                        <h2>分类</h2>
                        {/* <!-- 更多图标 --> */}
                        <div className="more">
                            {/* <!-- ...图标 --> */}
                            <span className="iconfont icon-gengduo">
                            </span>
                            {/* <!-- 竖线 --> */}
                            <div className="line"></div>
                            {/* <!-- 小圆圈 --> */}
                            <span className="iconfont icon-xiaoyuandian"></span>
                        </div>
                    </div>
                </header>
                {/* <!-- 搜索 --> */}
                <div className="box">
                    <input type="text" className="iconfont" placeholder="&#xe633; 按内容搜索" />
                </div>
                <ul>
                    {
                        list1.map(item => {
                            return <div key={item.id}>
                                <li onClick={() => this.goTwo(item.id)}>{item.catename}</li>
                            </div>
                        })
                    }

                </ul>
                {/* <!-- 旁边块 --> */}
                <div className="box1">
                    {/* <p className='re'>热门精选</p> */}
                    <div>
                        {list.map(item => {
                            return <div className='mmmm' key={item.id}>
                                <NavLink to='/detail' state={{ id: item.id, type:1,name: item.goodsname, img: item.img }}>
                                    < img src={item.img} alt="" />
                                    <div className='zi'>
                                        <div className='zhe'>7.9折</div>
                                        <p>{item.goodsname}</p>
                                        <div className='jia'>
                                            <p>$29.99</p>
                                            <span> <del>69.9</del> </span></div>

                                        {/* <div className='rr' onClick={this.gocart.bind(this)}>加入购物车</div> */}
                                    </div>
                                </NavLink>
                            </div>
                        })}
                    </div>

                </div> </div></div>
        )
    }
}
